<!-- 市级 - 自建出租房屋隐患录入系统汇总表（商业） -->
<template>
  <div>
    <div class="header">
      <div class="title">
        <div> 自建出租房屋隐患录入系统汇总表（商业）</div>
        <div class="table-settings">
          <ImportSetting
            :tableData="tableData"
            :tableColumns="displayColumns"
            :wscolsList="wscolsList"
            ref="ImporBusinessDom"
            excelName="自建出租房屋隐患录入系统汇总表(商业)"
            @click="importBusinessFn"
          />
        </div>
      </div>
    </div>
    <a-table
      :dataSource="tableData"
      :columns="displayColumns"
      :pagination="false"
      bordered
      :loading="loading"
    >
      <!-- vue3 中的写法 -->
      <template #headerCell="{ column }">
        <template v-if="column.key === 'use_electric_bicycle'">
          <Tooltip placement="top">
            <template #title>
              <span
                >电动自行车、电动平衡车及其蓄电池在房屋公共区域、疏散走道、楼梯间、安全出口或房间内停放、充电</span
              >
            </template>
            <span> 电动自行车... </span>
          </Tooltip>
        </template>

        <template v-if="column.key === 'use_bottled_liquefied_gas'">
          <Tooltip placement="top">
            <template #title>
              <span>出租房屋的公共区域、租住房间内、地下室、半地下室使用瓶装液化石油气</span>
            </template>
            <span> 出租房屋的公... </span>
          </Tooltip>
        </template>
        <template v-if="column.key === 'use_stacked_items'">
          <Tooltip placement="top">
            <template #title>
              <span>疏散走道、楼梯间、安全出口处堆放物品影响人员疏散</span>
            </template>
            <span> 疏散走道、楼... </span>
          </Tooltip>
        </template>
        <template v-if="column.key === 'use_burglar_mesh'">
          <Tooltip placement="top">
            <template #title>
              <span>外窗、疏散走道安装防盗网、广告牌、铁栅栏等影响逃生和灭火救援的障碍物</span>
            </template>
            <span> 外窗、疏散... </span>
          </Tooltip>
        </template>
        <template v-if="column.key === 'use_ceiling'">
          <Tooltip placement="top">
            <template #title>
              <span>供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等</span>
              <!-- <span>导出</span> -->
            </template>
            <span>供人员疏... </span>
          </Tooltip>
        </template>
        <template v-if="column.key === 'is_completely_isolated'">
          <Tooltip placement="top">
            <template #title>
              <span
                >居住区域与生产、经营、存储区域未使用实体砖墙、防火门等进行完全分隔，同时居住区域未设置直通室外的独立疏散楼梯、安全出口</span
              >
              <!-- <span>导出</span> -->
            </template>
            <span>居住区域... </span>
          </Tooltip>
        </template>
        <template v-if="column.key === 'use_flammable_materials'">
          <Tooltip placement="top">
            <template #title>
              <span
                >屋顶、围护结构、房间隔墙使用易燃可燃夹芯彩钢板搭建，疏散通道使用易燃可燃材料装修</span
              >
              <!-- <span>导出</span> -->
            </template>
            <span>屋顶、围护... </span>
          </Tooltip>
        </template>
        <template v-if="column.key === 'unauthorized_electrical_connect'">
          <Tooltip placement="top">
            <template #title>
              <span>在供电设施上擅自接线用电，擅自在导线上接用电器设备</span>
            </template>
            <span>在供电设... </span>
          </Tooltip>
        </template>

        <template v-if="column.key === 'not_enough_exits'">
          <Tooltip placement="top">
            <template #title>
              <span>疏散通道或安全出口数量不足或严重堵塞</span>
            </template>
            <span>疏散通道或... </span>
          </Tooltip>
        </template>

        <template v-if="column.key === 'fire_service_damaged'">
          <Tooltip placement="top">
            <template #title>
              <span>建筑消防设施严重损坏</span>
            </template>
            <span>建筑消防... </span>
          </Tooltip>
        </template>
        <template v-if="column.key === 'use_store_dangerous_goods'">
          <Tooltip placement="top">
            <template #title>
              <span>人员密集场所违规使用、储存易燃易爆危险品</span>
            </template>
            <span>人员密集场... </span>
          </Tooltip>
        </template>

        <template v-if="column.key === 'threaten_safety_fire_hazards'">
          <Tooltip placement="top">
            <template #title>
              <span>其他可能严重威胁公共安全的火灾隐患</span>
            </template>
            <span>其他可能严重... </span>
          </Tooltip>
        </template>
        <template v-if="column.key === 'use_flammable_insulation_materials'">
          <Tooltip placement="top">
            <template #title>
              <span
                >采用易燃可燃保温材料的冷库、设置液氮制冷剂的冷库的自建房设置居住场所（栋）</span
              >
            </template>
            <span>采用易燃... </span>
          </Tooltip>
        </template>
        <template v-if="column.key === 'use_flammable_dangerous_goods'">
          <Tooltip placement="top">
            <template #title>
              <span>生产、储存、经营易燃易爆危险品的自建房设置居住场所（栋）</span>
            </template>
            <span>生产、储存... </span>
          </Tooltip>
        </template>

        <template v-if="column.key === 'above_three_floor_self'">
          <Tooltip placement="top">
            <template #title>
              <span>3层及3层以上建筑是否仅房主自住使用</span>
            </template>
            <span>3层及3层以... </span>
          </Tooltip>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, toRefs, onMounted, onBeforeMount, computed } from 'vue';
  import { Tooltip } from 'ant-design-vue';
  import ImportSetting from './ImportSetting.vue';
  import { getBusinessList } from '/@/api/demo/system';
  import { iTableData, iTableColumns } from './types/table';
  import { iParams } from './types/params';

  import { useUserStore } from '/@/store/modules/user';
  // import { t } from '/@/hooks/web/useI18n';
  // 转义地区编码
  // import { selectClassFlyDict } from '/@/dict/bj_dict';
  let userInfo = ref<any>(null);
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number | any;
    loading: Boolean;
    keyWorld: String;
    cityToken: string | any;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 130,
      },
      {
        title: '区县 名称',
        dataIndex: 'qxmc',
        key: 'qxmc',
        align: 'center',
        width: 570,
      },
      {
        title: '街镇 名称',
        dataIndex: 'jzmc',
        key: 'jzmc',
        align: 'center',
        width: 850,
      },
      {
        title: '已排查建筑（栋）',
        dataIndex: 'ypc_sl',
        key: 'ypc_sl',
        align: 'center',
        width: 170,
      },
      {
        title:
          '电动自行车、电动平衡车及其蓄电池在房屋公共区域、疏散走道、楼梯间、安全出口或房间内停放、充电',
        dataIndex: 'use_electric_bicycle',
        key: 'use_electric_bicycle',
        align: 'center',
        width: 170,
      },
      {
        title: '出租房屋的公共区域、租住房间内、地下室、半地下室使用瓶装液化石油气',
        dataIndex: 'use_bottled_liquefied_gas',
        key: 'use_bottled_liquefied_gas',
        align: 'center',
        width: 170,
      },
      {
        title: '疏散走道、楼梯间、安全出口处堆放物品影响人员疏散',
        dataIndex: 'use_stacked_items',
        key: 'use_stacked_items',
        align: 'center',
        width: 170,
      },
      {
        title: '外窗、疏散走道安装防盗网、广告牌、铁栅栏等影响逃生和灭火救援的障碍物',
        dataIndex: 'use_burglar_mesh',
        key: 'use_burglar_mesh',
        align: 'center',
        width: 170,
      },
      {
        title: '供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等',
        dataIndex: 'use_ceiling',
        key: 'use_ceiling',
        align: 'center',
        width: 170,
      },
      {
        title:
          '居住区域与生产、经营、存储区域未使用实体砖墙、防火门等进行完全分隔，同时居住区域未设置直通室外的独立疏散楼梯、安全出口',
        dataIndex: 'is_completely_isolated',
        key: 'is_completely_isolated',
        align: 'center',
        width: 170,
      },
      {
        title: '屋顶、围护结构、房间隔墙使用易燃可燃夹芯彩钢板搭建，疏散通道使用易燃可燃材料装修',
        dataIndex: 'use_flammable_materials',
        key: 'use_flammable_materials',
        align: 'center',
        width: 170,
      },
      {
        title: '在供电设施上擅自接线用电，擅自在导线上接用电器设备',
        dataIndex: 'unauthorized_electrical_connect',
        key: 'unauthorized_electrical_connect',
        align: 'center',
        width: 170,
      },
      {
        title: '疏散通道或安全出口数量不足或严重堵塞',
        dataIndex: 'not_enough_exits',
        key: 'not_enough_exits',
        align: 'center',
        width: 170,
      },
      {
        title: '建筑消防设施严重损坏',
        dataIndex: 'fire_service_damaged',
        key: 'fire_service_damaged',
        align: 'center',
        width: 170,
      },
      {
        title: '人员密集场所违规使用、储存易燃易爆危险品',
        dataIndex: 'use_store_dangerous_goods',
        key: 'use_store_dangerous_goods',
        align: 'center',
        width: 170,
      },
      {
        title: '其他可能严重威胁公共安全的火灾隐患',
        dataIndex: 'threaten_safety_fire_hazards',
        key: 'threaten_safety_fire_hazards',
        align: 'center',
        width: 170,
      },
      {
        title: '采用易燃可燃保温材料的冷库、设置液氮制冷剂的冷库的自建房设置居住场所（栋）',
        dataIndex: 'use_flammable_insulation_materials',
        key: 'use_flammable_insulation_materials',
        align: 'center',
        width: 170,
      },
      {
        title: '生产、储存、经营易燃易爆危险品的自建房设置居住场所（栋）',
        dataIndex: 'use_flammable_dangerous_goods',
        key: 'use_flammable_dangerous_goods',
        align: 'center',
        width: 170,
      },
      {
        title: '3层及3层以上建筑是否仅房主自住使用',
        dataIndex: 'above_three_floor_self',
        key: 'above_three_floor_self',
        align: 'center',
        width: 170,
      },
      {
        title: '合计',
        dataIndex: 'sumall',
        key: 'sumall',
        align: 'center',
        width: 170,
      },
    ],
    id: null,
    loading: true,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
  });
  // 表格的 ref Dom名称
  const ImporBusinessDom: any = ref(null);
  let { tableData, tableColumns, loading, wscolsList } = toRefs(data);
  async function getData() {
    const { role } = userInfo.value;
    let groupname = '';
    if (role === 'City') {
      groupname = 'qxmc';
    } else if (role === 'Area') {
      groupname = 'jzmc';
    } else if (role === 'Street') {
      groupname = 'jzmc';
    }
    let params: iParams = {
      id: `xf_cs_yhd_sy`,
      groupname,
    };
    // console.log('@市级参数', params);
    let res: any = await getBusinessList(params);
    // console.log('@res--(商业)系统汇总表', res);
    loading.value = true;
    if (res || res.length > 0) {
      loading.value = false;
      res.forEach((item: any, index: number) => {
        // item.name = selectClassFlyDict(item.xzqdm);
        item.index = index + 1;
      });
      // console.log('data', data);
      // 算列和
      let above_three_floor_self_count = total(res, 'above_three_floor_self');
      let index_count = res.length + 1;
      let is_completely_isolated_count = total(res, 'is_completely_isolated');
      let not_enough_exits_count = total(res, 'not_enough_exits');
      let sumall_count = total(res, 'sumall');
      let 合计_count = total(res, '合计');
      let unauthorized_electrical_connect_count = total(res, 'unauthorized_electrical_connect');
      let fire_service_damaged_count = total(res, 'fire_service_damaged');
      let use_bottled_liquefied_gas_count = total(res, 'use_bottled_liquefied_gas');
      let use_burglar_mesh_count = total(res, 'use_burglar_mesh');
      let use_ceiling_count = total(res, 'use_ceiling');
      let use_electric_bicycle_count = total(res, 'use_electric_bicycle');
      let use_flammable_dangerous_goods_count = total(res, 'use_flammable_dangerous_goods');
      let use_flammable_insulation_materials_count = total(
        res,
        'use_flammable_insulation_materials',
      );
      let use_flammable_materials_count = total(res, 'use_flammable_materials');
      let use_stacked_items_count = total(res, 'use_stacked_items');
      let ypc_sl_count = total(res, 'ypc_sl');
      let threaten_safety_fire_hazards_count = total(res, 'threaten_safety_fire_hazards');
      let use_store_dangerous_goods_count = total(res, 'use_store_dangerous_goods');
      let allObj = {
        above_three_floor_self: above_three_floor_self_count,
        fire_service_damaged: fire_service_damaged_count,
        index: index_count,
        is_completely_isolated: is_completely_isolated_count,
        not_enough_exits: not_enough_exits_count,
        qxmc: '汇总隐患数',
        jzmc: '汇总隐患数',
        czmc: '汇总隐患数',
        sumall: sumall_count,
        threaten_safety_fire_hazards: threaten_safety_fire_hazards_count,
        unauthorized_electrical_connect: unauthorized_electrical_connect_count,
        use_bottled_liquefied_gas: use_bottled_liquefied_gas_count,
        use_burglar_mesh: use_burglar_mesh_count,
        use_ceiling: use_ceiling_count,
        use_electric_bicycle: use_electric_bicycle_count,
        use_flammable_dangerous_goods: use_flammable_dangerous_goods_count,
        use_flammable_insulation_materials: use_flammable_insulation_materials_count,
        use_flammable_materials: use_flammable_materials_count,
        use_stacked_items: use_stacked_items_count,
        use_store_dangerous_goods: use_store_dangerous_goods_count,
        ypc_sl: ypc_sl_count,
        合计: 合计_count,
      };
      data.tableData = [...res, allObj];
    }
  }
  // 计算总数的方法
  function total(arr: any, item: any) {
    let total = arr.reduce((pre: any, cur: any) => {
      return pre + cur[item];
    }, 0);
    return total;
  }
  function importBusinessFn() {
    if (ImporBusinessDom.value) {
      ImporBusinessDom.value.importFn();
    }
  }
  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }
  const displayColumns = computed(() => {
    const { role } = userInfo.value;
    let arr: any[] = [];
    if (role === 'City') {
      // qx
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
      return arr;
    } else if (role === 'Area') {
      // jz
      arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
      return arr;
    } else if (role === 'Street') {
      // cun
      // arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
      // console.log('@sb----', data.tableColumns);
      return data.tableColumns;
    } else {
      return data.tableColumns;
    }
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    getData();
  });
</script>

<style lang="less">
  .header {
    width: 100%;
    // height: 250px;
    display: flex;
    // border: 1px solid red;
    line-height: 40px;
    justify-content: space-between;
    flex-direction: column;
    .title {
      display: flex;
      justify-content: space-between;
    }
    .search {
      // border: 1px solid green;
      height: 170px;
      .space {
        // border: 1px solid red;
        padding: 10px 20px;
        display: flex;
        // justify-content: space-between
        flex-wrap: wrap;
        .space-item {
          line-height: 32px;
          margin-bottom: 10px;
          .title {
            text-align: right;
            width: 150px;
            display: block;
          }
          // line-height: 20px;
        }
      }
    }
    .searchBtn {
      display: flex;
      // flex-direction: row-reverse;
      align-self: flex-end;
      padding: 0 15px;
      .resetBtn {
        margin-right: 10px;
      }
    }
    .table-settings {
      & > * {
        margin-right: 12px;
      }

      svg {
        width: 1.3em;
        height: 1.3em;
      }
    }
  }
</style>
